<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<u-navbar :border-bottom="false" title="客户列表" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
			<!-- <graceNavBar :items="navItems"
			lineHeight="80rpx" :isCenter="true" 
			:currentIndex="cateCurrentIndex" :size="0" padding="20rpx" 
			activeLineBg="#3688FF" textAlign="center"
			activeColor="#3688FF" activeLineWidth="100%" activeLineHeight="2rpx" 
			:margin="10" @change="navChange" class="back_bg"></graceNavBar> -->
			<u-tabs :list="navItems" :is-scroll="false" :current="cateCurrentIndex" @change="navChange"></u-tabs>
			<view class="cu-list menu-avatar cont_list">
				<view class="cu-item_row" v-for="(item, index) in dataList" :key="index">
					<view class="zd_class" v-if="item.classify == 1"><view class="text">重点客户</view></view>
					<view class="v_time_1">
						提交日期：{{item.createTime}}
					</view>
					<view class="flex_row_fc">
						<view class="flex_1">
							<view class="t1">姓名：</view>{{item.name}}
						</view>
						<view class="flex_1">
							
						</view>
					</view>
					<view class="flex_row_fc_01">
						<view class="t1">手机号：</view><view style="display: inline-block;color: #007AFF;" @click="bdiphone(item.telephone)" ><u-icon name="phone-fill" color="#007AFF" size="28"></u-icon> {{item.telephone}}</view>
					</view>
					<view class="flex_row_fc">
						<view class="flex_1">
							<view class="t1">面积：</view>{{item.area==null?'':item.area}}
						</view>
						<view class="flex_1">
							<view class="t1">装修类型：</view>{{picker[item.type]}}
						</view>
					</view>
					<view class="flex_row_fc_01">
						<view class="t1">公司名称：</view>{{item.company==null?'':item.company}}
					</view>
					<view class="flex_row_fc_01">
						<view class="t1">地址：</view>{{item.address==null?'':item.address}}
					</view>
					<view class="flex_row_fc_01">
						<view class="t1">补充说明：</view>{{item.remark | flterremark}}
					</view>
						<view class="flex_btn">
							<u-button size="mini" @click="genjin(item.id)">跟进</u-button>
							<u-button size="mini" @click="editCustomer(item.id)">修改</u-button>
							<view v-if="item.identification != null || item.identification != '' || item.identification != undefined" style="display: inline-block;">
								<u-button size="mini" :type="item.identification == 1 ?'error':''" v-if="item.identification == 1">不可跟进</u-button>
								<u-button size="mini" :type="item.identification == 0 ?'success':''"  v-if="item.identification == 0">可跟进</u-button>
								<view v-if="item.identification == 2" style="display: inline-block;">
									<u-button size="mini" :type="item.identification == 2 ?'primary':''">签约</u-button>
								</view>
							</view>
							<view v-if="item.identificationAdmin != null || item.identificationAdmin != '' || item.identificationAdmin != undefined" style="display: inline-block;">
								<u-button size="mini" :type="item.identificationAdmin == 1 ?'error':''" v-if="item.identificationAdmin == 1" :disabled="true">不可跟进</u-button>
								<u-button size="mini" :type="item.identificationAdmin == 0 ?'success':''"  v-if="item.identificationAdmin == 0" :disabled="true">可跟进</u-button>
								<view v-if="item.identificationAdmin == 2" style="display: inline-block;">
									<u-button size="mini" :type="item.identificationAdmin == 2 ?'primary':''" :disabled="true">签约</u-button>
								</view>
							</view>
						</view>
				</view>
			</view>
			<view style="padding:20rpx 0;" v-if="dataShow">
				<graceEmpty text="暂无数据" :iconSize="100" :iconType="4" iconColor="#9DD26D" textColor="#9DD26D"></graceEmpty>
			</view>
		</scroll-view>
	</view>
</template>


<script>
var _self;
var page = 1,
	pageSize = 15;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	import graceNavBar from "../components/graceUI/components/graceNavBar.vue";
	import graceEmpty from "../components/colorui/components/graceEmpty.vue"; 
	export default {
		components: {
			graceNavBar,
			graceEmpty
		},
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
	    data() {
	        return {
				dataList: [],
				dataShow: false,
				cateCurrentIndex : 0,
				picker: ['毛坯', '遗留装修'],
				navItems : [
					{id:0,name:'个人客户'},
					{id:1,name:'共享客户'}, 
				],
	        }
	    },
		onUnload() {
			page = 1;
			this.dataList = [];
		},		
		onLoad: function() {
			_self = this;
			page = 1;
			this.getDataList();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			page = 1;
			this.dataList = [];
			this.getDataList();
		},
		// 加载更多
		onReachBottom: function() {
			this.getDataList();
		},
		filters:{
			flterremark(value){
				if(value == undefined || value == null){
					return '暂无数据'
				}else{
					return value;
				}
			}
		},
	    methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			navChange : function (index,e){
				this.cateCurrentIndex = index;
				page = 1;
				this.dataList = [];
				this.getDataList();
			},
	        getDataList: function() {
	        	var hideload = 0;
	        	uni.showLoading();
	        	uni.request({
	        		url: this.serverUrl + 'app/getCustomerList',
	        		data: {
						type: this.cateCurrentIndex,
	        			memberId: this.userInfo.id,
	        			pageNum: page,
	        			pageSize: pageSize,
	        		},
	        		header: {
	        			"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
	        		},
	        		method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == 0) {
							var pageSum = Math.ceil(r.data.count/pageSize);
							if(pageSum==0){
								this.dataShow = true;
							}else{
								if (page>pageSum) {
									hideload = 1;
									uni.hideLoading();
									uni.showToast({
										title: "没有更多了",
										icon: "none",
										duration: 1500
									}); 
								}else{
									this.dataShow = false;
									for (var i = 0; i < r.data.data.length; i++) {
										this.dataList = this.dataList.concat(r.data.data[i]);
									}
									console.log(this.dataList)
									page++;
								}
							}
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
	        	});
	        },
			editCustomer(id){
				uni.navigateTo({
					url:'/pageB/component/customeredit?customerId='+id+'&cateCurrentIndex='+this.cateCurrentIndex
				})
			},
			genjin(id){
				uni.navigateTo({
					url:'/pageB/component/customergj?customerId='+id
				})
			},
			bdiphone(iphone){
				if(iphone.concat(';')) {
					var array = iphone.split(';');
					if(array.length>0) {
						iphone = array[0];
					}
				}
				console.log('iphone=' + iphone)	
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: iphone, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
					
				  });
			}
		}
	}	
</script>

<style lang="less">
	.btn1{
		margin-left: 120rpx;
	}
	.btn2{
		margin-left: 10rpx;
	}
	page{
		background-color: #2149c3;
	}
	.back_bg{
		background-color: #FFFFFF;
	}
	.cont_list{
		padding: 20rpx;
		.cu-item_row{
			margin-bottom: 10rpx;
			padding: 20rpx 30rpx;
			background-color: #FFFFFF;
			border-radius: 4rpx;
			position: relative;
			overflow: hidden;
			.v_time_1{
				font-size: 28rpx;
				line-height: 60rpx;
				color: #898989;
			}
			.flex_row_fc{
				display: flex;
				margin-bottom: 10rpx;
				.flex_1{
					flex: 1;
					font-size: 28rpx;
					color: #282828;
					.t1{
						display: inline-block;
						color: #3d3d3d;
						font-weight: bold;
					}
				}
			}
			.flex_row_fc_01{
				margin-bottom: 10rpx;
				font-size: 28rpx;
				color: #282828;
				.t1{
					display: inline-block;
					color: #3d3d3d;
					font-weight: bold;
				}
			}
			.flex_btn{
				padding: 15rpx 0rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				u-button{
					margin: 0rpx 30rpx;
				}
			}
		}
	}
	.zd_class{
		display: inline-block;
		position: absolute;
		right: -50rpx;
		top: 15px;
		transform: rotate(45deg);
		.text{
			background-color: #fc8535;
			color: #FFFFFF;
			padding: 0rpx 45rpx;
		}
	}
</style>
